<template>
  <div id="giv">
    <div class="giv-1">
      <div class="giv-4">商品订单</div>
    </div>

    <div class="giv-2">
      <div class="giv-8">
        <div>
          收货人信息
          <span class="text-3" @click="site()">【修改】</span>
        </div>
        <div class="giv-10">
          <span>{{ user.name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ user.phone }}</span>
          <br />
          <span>{{ user.token }}</span>
        </div>
      </div>
      <div class="giv-9">
        <div class="giv-11" v-for="(v, index) in arr" :key="index">
          <img :src="v.img" class="img" />
          <span>{{ v.title }}</span>
          <br />
          <br />
          <div>
            <span class="text-2">￥{{ v.price }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>×{{ v.inventory }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="giv-3">
      <div class="text-1">
        应付总额:
        <span class="text-2">￥{{ num }}</span>
      </div>
      <button class="btn-1" @click="submit()">确认提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "李某某",
        phone: "15801316393",
        token: "少时诵诗书所所所所所所所所所"
      },
      arr: [],
      num: 0,
      id: []
    };
  },
  //预加载
  created() {
    this.show();
  },
  methods: {
    //获取订单内容
    show() {
      let that = this;
      this.$axios.get("/indent").then(function(response) {
        console.log(response.data);
        that.arr = response.data.data;
        let i;
        for (i = 0; i < that.arr.length; i++) {
          that.num += that.arr[i].price * that.arr[i].inventory;
          that.id += "," + that.arr[i].id;
        }
        that.id = that.id.substr(1);
      });
    },
    //提交订单
    submit() {
      this.$axios
        .get("/theOrder", {
          params: {
            id: this.id,
            name: this.user.name,
            phone: this.user.phone,
            price: this.num
          }
        })
        .then(function(response) {
          console.log(response.data);
        });
    }
  }
};
</script>

<style>
.giv {
  display: flex;
  width: 100%;
}
.giv-1 {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 50px;
  background: black;
}
.giv-3 {
  /* display: flex; */
  flex-wrap: wrap-reverse;
  width: 100%;
  height: 70px;
  margin-top: 2px;
  border-top: 1px solid;
  padding-top: 5px;
}
.giv-4 {
  color: azure;
  margin: 15px auto;
}
.text-1 {
  width: 70%;
  float: left;
  color: black;
  align-self: auto;
  margin: 15px auto;
}
.text-3 {
  color: red;
}
.text-2 {
  color: red;
  font-size: 20px;
}
.btn-1 {
  height: 70px;
  width: 100px;
  background: red;
  border: 0px;
  border-radius: 10px;
  float: right;
}
.giv-8 {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid;
}
.giv-10 {
  float: left;
  margin-left: 30%;
}
.giv-9 {
  width: 100%;
}
.giv-11 {
  flex-direction: column;
  width: 100%;
  height: 120px;
  margin-top: 2px;
  /* background: red; */
  border-bottom: 0.5px solid #aaa;
  border-top: 0.5px solid #aaa;
}
.img {
  width: 100px;
  height: 100%;
  float: left;
}
</style>
